<template>
  <div class="box">
    <div id="myChart" style="width: 60%; height: 400px"></div>
    <div class="text">
      <ul>
        <li class="rowItem" v-for="(item, index) in initList" :key="index">
          <span class="yuan" :style="{ backgroundColor: item.color }"></span>
          <span class="bumen">{{ item.departName }}</span>
          <span class="fen">{{
            item.departNameCount == null ? 0 + "%" : item.departNameCount+ "%"
          }}</span>
          <span class="money"
            >￥{{ item.departNameMoney ? item.departNameMoney : 0 }}</span
          >
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { EleResize } from "@/util/esresize.js";
export default {
  data() {
    return {
      dataListArr: [
        {
          color: "#3AA0FF",
        },
        {
          color: "#36CBCB",
        },
        {
          color: "#4DCB73",
        },
        {
          color: "#FAD337",
        },
        {
          color: "#975FE4",
        },
        {
          color: "#F2637B",
        },
        {
          color: "#3AA0FF",
        },
        {
          color: "#36CBCB",
        },
        {
          color: "#4DCB73",
        },
        {
          color: "#FAD337",
        },
        {
          color: "#975FE4",
        },
        {
          color: "#F2637B",
        },
      ],
      initList: [],
      pieArr: [],
    };
  },
  props: {
    departDetialsList: {
      type: Array,
    },
  },
  watch: {
    departDetialsList: {
      deep: true,
      handler(newValue) {
        let myData = JSON.parse(JSON.stringify(newValue));
        let myDatalg = false;
        this.initList = this.sortArryByKey(
          myData,
          "shouldSendSalaryMoney"
        ).reverse();

        this.initList.forEach((element, index) => {
          element.color = this.dataListArr[index].color;
          element.departNameCount = element.departNameCount
            ? element.departNameCount.substr(
                0,
                element.departNameCount.length - 1
              )
            : 0;
          if (element.departNameCount == 100) {
            myDatalg = true;
          }
        });
        let Circulardiagram = JSON.parse(JSON.stringify(this.initList));
        
        this.pieArr = [];
        let obj1 = {
          value: 1,
          name: "",
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              color: "rgba(0, 0, 0, 0)",
              borderColor: "rgba(0, 0, 0, 0)",
              borderWidth: 0,
            },
          },
        };

        Circulardiagram.forEach((idx) => {
          let obj = {
            value: 155,
            name: "事业部",
            itemStyle: {
              color: "#4DCB73",
            },
          };
          obj.name = idx.departName;
          idx.departNameCount = idx.departNameCount
            ? idx.departNameCount.substr(0, idx.departNameCount.length - 1)
            : 0;
          obj.value = Number(idx.departNameCount);
          obj.itemStyle.color = idx.color
          console.log(obj.value, "obj.value");
          this.pieArr.push(obj);
          if (!myDatalg) {
            this.pieArr.push(obj1);
          }
        });
        this.drawLine();
      },
    },
  },
  methods: {
    //数组对象方法排序:
    sortArryByKey(array, key) {
      return array.sort(function (a, b) {
        var x = a[key];
        var y = b[key];
        return x < y ? -1 : x > y ? 1 : 0;
      });
    },
    drawLine() {
      // 初始化Echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      let resizeDiv = document.getElementById("myChart");
      // 绘制图表
      myChart.setOption({
        // title: { text: '在Vue中简单使用Echarts' },
        tooltip: {
          trigger: "item",
          formatter: `{a} <br/>{b}: {d}% `,
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["55%", "70%"],
            center: ["50%", "52%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "28",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.pieArr,
          },
        ],
      });
      let listener = function () {
        myChart.resize();
      };
      EleResize.on(resizeDiv, listener);
      myChart.on("mouseover", (v) => {
        // eslint-disable-next-line no-undef

        if (v.dataIndex != 0) {
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: 0,
          });
        }
      });
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0,
      });
      myChart.on("mouseout", () => {
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: 0,
        });
      });
      // if(this.pieArr[0].value!=0){
      //     myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 0 });
      //      myChart.on('mouseout', () => {
      //   myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 0 });
      // });
      // }
    },
  },
};
</script>

<style scoped lang='less'>
.box {
  display: flex;
  justify-content: space-between;
  padding-top: 40px;
  .text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 20px;

    .rowItem {
      // line-height: 10px;
      padding-top: 10px;
      font-size: 16px;
      height: 50px;
      .yuan {
        display: inline-block;
        width: 10px;
        height: 10px;

        border-radius: 50%;
        margin-right: 0.5vw;
      }
      .bumen {
        color: #333333;
        margin-right: 1vw;
      }
      .fen {
        color: #999999;
        margin-right: 1vw;
      }
      .money {
        color: #666666;
      }
    }
  }
}
</style>
